<template>
  <el-dialog :model-value="props.visible" :title="props.title" width="1000px" append-to-body align-center destroy-on-close @close="handleClose">
    <div class="grille-container">
      <!-- 目录 -->
      <cascader-catalog v-model:category-id="query.categoryId" :category-type="2" :first-default="false" @refresh="handlePage" />
      <div class="main-container dialog-container">
        <el-tabs v-if="props.materialType === 0" v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane :key="0" :label="'全部'" :name="0" />
          <el-tab-pane v-for="item in tabPanes" :key="item.code" :label="item.desc" :name="item.code" />
        </el-tabs>
        <el-form :model="query" class="filter-container" inline label-width="70px">
          <el-form-item>
            <upload-file v-permission="'material:save'" :category-id="query.categoryId" :on-bus="props.visible" @refresh="handleQuery" />
          </el-form-item>
          <el-form-item label="素材名称">
            <el-input v-model="query.materialName" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
            <el-button @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <div :class="props.materialType === 0 ? 'table-main' : 'table-main-image'">
          <div v-if="props.materialType === 4" v-loading="page.loading" class="table-main-card">
            <!-- 图片显示 -->
            <div v-for="(item, index) in page.list" :key="index" class="table-main-card-item" @click="handleCard(item)">
              <div v-if="item['check']" class="card-check" />
              <el-image class="table-main-card-item-img" fit="contain" :src="item.materialUrl" :alt="item.materialName" />
              <div class="table-main-card-item-name">{{ item.materialName }}</div>
              <div class="table-main-card-item-desc">
                <span>{{ transformSize(item.materialSize) }}</span>
                <span>{{ item.imgWidth }}*{{ item.imgHeight }}</span>
              </div>
            </div>
          </div>
          <el-table v-else ref="tableRef" v-loading="page.loading" :data="page.list">
            <!-- 其他 -->
            <el-table-column v-if="props.multiple" type="selection" width="30" />
            <el-table-column label="素材名称" prop="materialName">
              <template #default="scope">
                <span>{{ scope.row.materialName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="素材类型" prop="materialType" :width="200">
              <template #default="scope">
                <span>
                  <enum-view :enum-name="'MaterialType'" :enum-value="scope.row.materialType" />
                  【<span v-if="scope.row.materialType < 3"> <enum-view :enum-name="'VodPlatform'" :enum-value="scope.row.vodPlatform" /></span>
                  <span v-else><enum-view :enum-name="'StoragePlatform'" :enum-value="scope.row.storagePlatform" /></span>】
                </span>
                <br />
                <span v-if="scope.row.materialType < 3">{{ formatTime(scope.row.videoLength) }}</span>
                <!-- 文档 -->
                <span v-if="scope.row.materialType === 3">{{ scope.row.docPage }} 页</span>
                <!-- 图片 -->
                <el-image
                  v-if="scope.row.materialType === 4"
                  :src="scope.row.materialUrl"
                  :preview-src-list="[scope.row.materialUrl]"
                  preview-teleported
                  style="height: 20px; width: auto; vertical-align: middle; margin-right: 10px"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <el-button link type="primary" @click="selectMaterial(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <common-pagination v-model:page="page" @pagination="handlePage" />
      </div>
    </div>
    <template #footer>
      <el-button @click="handleClose()">取消</el-button>
      <el-button type="primary" @click="handleSubmit()">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import useTable from '@/utils/table'
  import { resourceApi } from '@/api/resource'
  import CommonPagination from '@/components/Common/Pagination/index.vue'
  import { formatTime, transformSize } from '@/utils/base'
  import { getEnumList } from '@/utils/enum'
  import EnumView from '@/components/Enum/View/index.vue'
  import CascaderCatalog from '@/components/Cascader/Catalog/index.vue'
  import UploadFile from '@/components/Upload/File/index.vue'

  const tableRef = ref()

  const props = defineProps({
    title: {
      type: String,
      default: '请选择素材'
    },
    visible: {
      type: Boolean,
      default: false
    },
    materialType: {
      type: Number, //素材类型：视频1，音频2，文档3，图片4，压缩包5
      default: 0
    },
    multiple: {
      type: Boolean, //是否支持多选
      default: false
    }
  })

  // 卡片
  const itemList = ref([])
  const handleCard = (item) => {
    item.check = !item.check
    const ids = itemList.value.map((el) => el.id)
    if (item.check) {
      if (ids.indexOf(item.id) === -1) {
        if (props.multiple) {
          itemList.value.push(item)
        } else {
          // 单选
          itemList.value.forEach((i) => {
            i.check = false
          })
          itemList.value = [item]
        }
      }
    } else {
      if (ids.indexOf(item.id) > -1) {
        itemList.value.splice(ids.indexOf(item.id), 1)
      }
    }
  }

  // 提交
  const handleSubmit = () => {
    if (props.materialType === 4) {
      // 获取选中的图片
      emit('close', itemList.value)
    } else {
      // 获取选中的素材
      let materialList = []
      tableRef.value.getSelectionRows().forEach((item) => {
        materialList.push(item)
      })
      emit('close', materialList)
    }
  }

  const activeName = ref(props.materialType)
  const tabPanes = ref()
  onMounted(async () => {
    tabPanes.value = await getEnumList('MaterialType')
  })
  const handleTabClick = (tab) => {
    activeName.value = tab.props.name
    query.materialType = tab.props.name
    handleQuery()
  }

  const emit = defineEmits(['close'])
  const selectMaterial = (info) => {
    emit('close', info)
  }

  // 关闭
  const handleClose = () => {
    emit('close')
  }

  // 基础功能
  const { page, handlePage, query, handleQuery, resetQuery } = useTable(
    {
      page: resourceApi.materialPage
    },
    {
      materialType: props.materialType
    }
  )
</script>

<style lang="scss" scoped>
  .table-main {
    height: calc(80vh - 180px);
    overflow: auto;
  }

  .table-main-image {
    height: calc(80vh - 120px);
    overflow: auto;
  }

  .table-main-card {
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;

    .table-main-card-item {
      cursor: pointer;
      margin-right: 10px;
      margin-bottom: 10px;
      width: 220px;
      position: relative;
      overflow: hidden;
      border: 1px solid #ebeef5;
      border-radius: 5px;

      .table-main-card-item-img {
        height: 120px;
        width: 100%;
        object-fit: cover;
      }

      .table-main-card-item-name {
        margin: 5px 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 0 10px;
      }

      .table-main-card-item-desc {
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        margin-bottom: 5px;
      }
    }
  }

  .card-check {
    width: 60px;
    height: 60px;
    top: -30px;
    right: -30px;
    position: absolute;
    background: #3d7fff;
    transform: rotate(45deg);
    z-index: 10;
  }

  .card-check:before {
    background-image: url('../../../assets/images/check.svg');
    background-repeat: no-repeat;
    content: '';
    width: 14px;
    height: 14px;
    color: #fff;
    position: absolute;
    display: flex;
    left: 24px;
    bottom: 5px;
    transform: rotate(319deg);
    align-items: center;
    justify-content: center;
    font-weight: bold;
    letter-spacing: 2px;
  }
</style>
